<template>
  <a-form :form="form">
    <div class="drawer">
      <div class="drawer-item">
        <div class="drawer-label"><label>{{ $t('message.status') }}</label></div>
        <div class="drawer-control">
          <a-select v-model="data.status" :placeholder="$t('choose.please')" :allow-clear="true" default-value="">
            <a-select-option value="">{{ $t('all.status') }}</a-select-option>
            <a-select-option value="succeed">{{ $t('message.status.succeed') }}</a-select-option>
            <a-select-option value="failed">{{ $t('message.status.failed') }}</a-select-option>
            <a-select-option value="waiting">{{ $t('message.status.waiting') }}</a-select-option>
            <a-select-option value="processing">{{ $t('message.status.processing') }}</a-select-option>
            <a-select-option value="ignored">{{ $t('message.status.ignored') }}</a-select-option>
            <a-select-option value="created">{{ $t('message.status.created') }}</a-select-option>
          </a-select>
        </div>
      </div>
      <div class="drawer-item">
        <div class="drawer-label"><label>{{ $t('task.topic') }}</label></div>
        <div class="drawer-control">
          <a-input v-model="data.topic" :allow-clear="true" :placeholder="$t('enter.please')" />
        </div>
      </div>
      <div class="drawer-item">
        <div class="drawer-label"><label>{{ $t('task.tag') }}</label></div>
        <div class="drawer-control">
          <a-form-item>
            <a-input v-model="data.tag" :allow-clear="true" :placeholder="$t('enter.please')" />
          </a-form-item>
        </div>
      </div>
      <div class="drawer-item">
        <div class="drawer-label"><label>{{ $t('message.hash') }}</label></div>
        <div class="drawer-control">
          <a-form-item>
            <a-input v-model="data.hash" :allow-clear="true" :placeholder="$t('enter.please')" />
          </a-form-item>
        </div>
      </div>
      <div class="drawer-item">
        <div class="drawer-label"><label>{{ $t('message.id') }}</label></div>
        <div class="drawer-control">
          <a-form-item>
            <a-input v-model="data.message_id" :allow-clear="true" :placeholder="$t('enter.please')" />
          </a-form-item>
        </div>
      </div>
      <div class="drawer-button">
        <a-form-item>
          <a-button type="primary" @click="submit">{{ $t('action.search') }}</a-button>
          <a-button type="default" @click="close">{{ $t('action.close') }}</a-button>
        </a-form-item>
      </div>
    </div>
  </a-form>
</template>

<script>
export default {
  data () {
    return {
      data: { status: '' },
      form: this.$form.createForm(this)
    }
  },
  methods: {
    close () { this.$emit('update:close') },
    submit () { this.$emit('update:submit', this.data) }
  },
  mounted () { this.data = this.origin },
  name: 'SearchServlets',
  props: { origin: { type: Object, required: true } },
  watch: { origin: { handler (data) { this.data = data } } }
}
</script>
